<template>
    <view class="card" @click="handleNavigateTo('/pagesA/eventDetails/index')">
        <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="240rpx" height="260rpx" radius="16rpx"></up-image>
        <view class="card-text flex1">
            <view class="font28 weight" style="margin-bottom: 56rpx;">闲置名称闲置名称闲置名称</view>
            <view class="font20 grey">
                <view class="mb8">2023/9/14周四19:00</view>
                <view class="grey justify-between mb8">
                    <view>地址：梦想小镇互联网3幢</view>
                    <view>93.0km</view>
                </view>
                <view class="mb16">电话：176****7141</view>
            </view>
            <view class="label-block font20">
                <view class="label">体育器材</view>
                <view class="label">体育器材</view>
                <view class="label">体育器材</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { handleNavigateTo } from '@/plugins/uniApp'
</script>

<style lang="scss" scoped>
.card {
    display: flex;
    align-items: stretch;
    margin-bottom: 36rpx;
    padding-bottom: 36rpx;
    border-bottom: 1rpx solid #F5F5F5;

    .card-text {
        padding: 7rpx 0;
        margin-left: 27rpx;
    }
}

.label-block {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.label {
    padding: 2rpx 12rpx;
    background: rgba(244,187,68,0.2);
    border: 1rpx solid #F4BB44;
    border-radius: 15rpx;
    color: #F4BB44;
}
</style>